var xjrightChart1 = echarts.init(document.getElementById("right_chart1"),'macarons');
var app = {};
option = null;

var xData = [
    [
        60,80,45,65,55,65,92,52,74,82,65,83,72,90,55,75,54,57,98,58,89,58,92,82,67,100,70,92,72,83,68,55,64,60,83,64,99,77,82,80,75,93,85,62,76,56,96,
        58,92,82,67,100,75,93,85,70,92,72,83,68,55,64,60,83,64,99,77,60,80,45,65,55,65,92,52,74,82,65,83,72,90,82,80,55,75,54,57,98,58,89,62,76,56,96
    ],
];

function makeData(){
    var tmp = [];
    for (var i =0; i< 1000;i++){
        tmp.push(Math.random()*5+50);
    }
    return tmp;
}

option = {
    // backgroundColor:'rgba(255, 255, 255, 0.9)', //设置无背景色
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis',
        // formatter: function (params) {
        //     params = params[0];
        //     var date = new Date(params.name);
        //     return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        // },
        axisPointer: {
            animation: false
        }
    },
    color:['#20fffd'],
    grid: {
        left: '50',
        right: '80',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        axisLabel:{
            show:true,
            textStyle: {
                color: '#fff',
                fontSize:30
            }

        },
        axisLine:{
            lineStyle:{
                color: '#56f0ed',
                width:5
            }
        },
        data: [
            "2018-01-01",
            "2018-01-02",
            "2018-01-03",
            "2018-01-04",
            "2018-01-05",
            "2018-01-06",
            "2018-01-07",
            "2018-01-08",
            "2018-01-09",
            "2018-01-10",
            "2018-01-11",
            "2018-01-12",
            "2018-01-13",
            "2018-01-14",
            "2018-01-15",
            "2018-01-16",
            "2018-01-17",
            "2018-01-18",
            "2018-01-19",
            "2018-01-20",
            "2018-01-21",
            "2018-01-22",
            "2018-01-23",
            "2018-01-24",
            "2018-01-25",
            "2018-01-26",
            "2018-01-27",
            "2018-01-28",
            "2018-01-29",
            "2018-01-30",
            "2018-01-31",
            "2018-02-01",
            "2018-02-02",
            "2018-02-03",
            "2018-02-04",
            "2018-02-05",
            "2018-02-06",
            "2018-02-07",
            "2018-02-08",
            "2018-02-09",
            "2018-02-10",
            "2018-02-11",
            "2018-02-12",
        ],
        type:"category"
    },
    yAxis: {
        name:"帧",
        type : 'value',
        nameTextStyle:{
            color:"#fff",
            fontSize:40
        },
        min:0,
        max:100,
        interval:10,
        axisLabel: {
            show: true,
            // interval: 'auto',
            // formatter: '{value}%',
            // position: 'left',
            // nameLocation: 'middle',
            // nameGap: 35,
            textStyle: {
                color: '#fff',
                fontSize:20
            }
        },
        show: true,
        splitLine:{
            show:false
        },
        axisLine:{
            lineStyle:{
                color: '#56f0ed',
                width:5
            }
        }
    },
    series: [{
        name: 'E',
        type: 'line',
        itemStyle: {
            normal: {
                borderColor:'#06dbf3'
            },
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgb(32,255,253,0.9)'
            }, {
                offset: 1,
                color: 'rgb(32,255,253,0)'
            }])
        },
        smooth:false,
        showSymbol: false,
        hoverAnimation: false,
        data:  makeData(),
    },
    ]
};

setInterval(function () {
    var op = xjrightChart1.getOption();
    var data0 = op.series[0].data;
    //var data1 = op.series[1].data;
    //var data2 = op.series[1].data;
    op.series[0].data.push(data0.shift())
    // data0.shift();
    // data0.push();
    //data1.shift();

    //data2.shift();
    // data1.push();

    //var data2 = op.series[0].data;
    // op.xAxis[0].data.shift();
    // op.xAxis[0].data.push(xAxisdata2);
    // console.log(data0,data1,data2);
    xjrightChart1.setOption(op);
}, 5000);
if (option && typeof option === "object") {
    xjrightChart1.setOption(option, true);
    window.onresize = function () {
        xjrightChart1.resize();
    }
}
